<!doctype html>
<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="shortcut icon" href="../favicon.ico">
		<script type="text/javascript">
			$(function(){
				var dbSize=2*1024*1024;
				db = openDatabase('firstDB', '', '', dbSize);
				
				// db.transaction(function(tx) {
				// 	tx.executeSql("DROP TABLE customer",[]
				// 	, function(e) {
				// 		console.log("DROP失败 ", e);
				// 	}, function() {
				// 		console.log("DROP成功 ");
				// 	});
				// });
				
				db.transaction(function(tx) {
					tx.executeSql("CREATE TABLE IF NOT EXISTS customer (id integer NOT NULL PRIMARY KEY,name char(10),address varchar(200))", [], onSuccess, onError);
					showAll();
				}, function(e) {
					console.log("交易失败 ", e);
				}, function() {
					console.log("交易成功 ");
				});
				function onSuccess(tx, results) {
					console.log("打开数据库成功！");
				}
				function onError(e) {
					console.log("打开数据库错误"+e.mesage);
				}
				$("button").click(function() {
					var name=$("#name").val();
					var address=$("#address").val();
					if(name=="" || address=="") {
						$("#message").html("**请输入姓名地址**");
						return false;
					}
					
					db.transaction(function(tx) {
						tx.executeSql(
						"INSERT INTO customer(name,address) values(?,?)", 
						[name, address],
						function(tx, result) {
							$("#message").html("新增数据完成！");
							showAll();
						},
						function(e) { $("#message").html("新增数据错误："+e.message); }
						);
					});
				});
				
				function showAll() {
					$("#showData").html("");
					db.transaction(function(tx) {
						tx.executeSql(
						"SELECT id,name,address FROM customer",
						[],
						function(tx, result) {
							if(result.rows.length>0) {
								var str="现有数据：<br /><table><tr><td>id</td><td>姓名</td><td>地址</td><td>&nbsp;</td></tr>";
								for(var i=0; i<result.rows.length; i++) {
									item = result.rows.item(i);
									str += "<tr><td>"+item["id"]+"	</td><td>"+item["name"]+"</td><td>"+item["address"]+"</td><td><input type='button' id='"+item["id"]+"' class='delItem' value='删除' /></td></tr>";
								}
								str += "</table>";
								$("#showData").html(str);
							}
						},
						function(e) {
							$("#message").html("SELECT 语法出错了！"+e.message);
						}
						);
					});
				}
				
				$(document).on('click', ".delItem", function(){
					var delid = $(this).prop("id");
					db.transaction(function(tx) {
						var delstr = "DELETE FROM customer WHERE id=?";
						alert(delstr+delid);
						tx.executeSql(delstr, [delid], function(tx, result) {
							$("#message").html("删除数据完成！");
							showAll();
						}, function(e) {
							$("#message").html("删除数据错误:"+e.message);
						});
					});
				});
			});
		</script>
		<style type="text/css">
			#showData table{
				border: 1px #000000 solid;
			}
			#showData td{
				border: 1px #333333 solid;
			}
		</style>
	</head>
	<body>
		<h1>数据新增与删除</h1>
		<table>
			<tr>
				<td>姓名：</td>
				<td><input type="text" id="name"</td>
			</tr>
			<tr>
				<td>地址：</td>
				<td><input type="text" id="address"</td>
			</tr>
		</table>
		<button id='new' data-inline="true">发送</button>
		<p>
			<div id="message"></div>
			<div id="showData"></div>
		</p>
	</body>
</html>